import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { formatMonthDay } from "@/utils/format-utils";

import SongOperationBar from "@/components/song-operation-bar";
import { RankingHeaderWrapper } from "./style";
import { getPlayListDetailAction } from "../../store/actionCreators";
export default memo(function RankingHeader() {
  const dispatch = useDispatch();
  const { topListIndex, topList, playListDetail } = useSelector(
    (state) => ({
      topListIndex: state.getIn(["ranking", "topListIndex"]),
      topList: state.getIn(["ranking", "topList"]),
      playListDetail: state.getIn(["ranking", "playListDetail"]),
    }),
    shallowEqual
  );
  const topInfo = playListDetail;
  useEffect(() => {
    const id = topList[topListIndex] && topList[topListIndex].id;
    if (!id) return;
    dispatch(getPlayListDetailAction(id));
  }, [dispatch, topListIndex, topList]);
  return (
    <RankingHeaderWrapper>
      <div className="image">
        <img src={topInfo.coverImgUrl} alt="" />
        <span className="image_cover">封面</span>
      </div>
      <div className="info">
        <div className="title">{topInfo.name}</div>
        <div className="time">
          <i className="clock sprite_icon2"></i>
          <div>最近更新：{formatMonthDay(topInfo.updateTime)}</div>
          <div className="update-f">（{"每日更新:TODO"}）</div>
        </div>
        <SongOperationBar
          favorTitle={`(${topInfo.subscribedCount})`}
          shareTitle={`(${topInfo.shareCount})`}
          downloadTitle="下载"
          commentTitle={`(${topInfo.commentCount})`}
        />
      </div>
    </RankingHeaderWrapper>
  );
});
